<template>
  <div class="container">
    <img src="@/assets/img/zone.png" alt />
    <div class="wrapper">
      <el-form v-show="status==0" ref="form" :model="form" label-width="80px">
        <el-card class="card">
          <el-form-item style="width: 600px" label="头像">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :headers='headerObj'
            
          >
            <img ref="img" v-if="form.photo" :src="form.photo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item style="width: 600px" label="用户名">
          <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item style="width: 600px" label="姓名">
          <el-input v-model="form.nickname" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item style="width: 600px" label="电话">
          <el-input v-model="form.phone" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item v-if="info.role == 'coach'" style="width: 600px" label="年龄">
          <el-input v-model="form.age" placeholder="请输入年龄" disabled></el-input>
        </el-form-item>
        <el-form-item style="width: 600px" label="日期">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date"
          ></el-date-picker>
        </el-form-item>

        <el-button style="margin-left: 50px" type="primary" 
         @click="submitInfo" >提交</el-button
        >
        <el-button style="margin-left: 50px" type="primary" 
         @click="logout" >退出登录</el-button
        >
        <el-button style="margin-left: 50px" type="primary" 
         @click="checkMore">查看更多</el-button
        >
      </el-card>
      </el-form>
      <div v-show="status==1" >
       
        <el-table :data="examList" border style="width: 100%;margin-top:20px;">
          <el-table-column
          prop="title"
          label="项目"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="考试编号"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="考试名称"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="school"
          label="驾校"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="img"
          label="考场图片"
          width="100"
          class="imgwrap"
          align="center"
        >
          <template v-slot="{ row }">
            <img :src="row.img" alt />
          </template>
        </el-table-column>
        <el-table-column
          prop="adress"
          label="考场地址"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="time"
          label="考试时间"
          width="160"
          align="center"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
        <template slot-scope="{ row, index }">
          <el-button
          type="danger"
          icon="el-icon-scissors"
          title="取消预约"
          size="big"
          @click="cancelExam(row)"
          ></el-button>
        </template></el-table-column>
      </el-table>
      <el-table :data="practiceList" border style="width: 100%;margin-top:20px;">
        <el-table-column
          prop="title"
          label="项目"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="id"
          label="预约编号"
          width="180"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="nickname"
          label="姓名"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="练习科目"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="img"
          label="图片"
          width="100"
          class="imgwrap"
        >
          <template v-slot="{ row }">
            <img :src="row.img" alt />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="coach"
          label="教练"
          width="80"
        ></el-table-column>
    
        <el-table-column
          align="center"
          prop="adress"
          label="地址"
          width="120"
        ></el-table-column>
        <el-table-column align="center" prop="time" width="160" label="练车时间"></el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
        <template slot-scope="{ row, index }">
          <el-button
          type="danger"
          icon="el-icon-scissors"
          title="取消预约"
          size="big"
          @click="cancelPra(row)"
          ></el-button>
        </template></el-table-column>
      </el-table>
      <el-table :data="myApp" border style="width: 100%;margin-top:20px;">
          <el-table-column
          prop="title"
          label="项目"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="报名编号"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="type"
          label="驾照类型"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="status"
          label="审核状态"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="photo"
          label="学员图片"
          width="100"
          class="imgwrap"
          align="center"
        >
          <template v-slot="{ row }">
            <img  :src="row.photo" alt />
          </template>
        </el-table-column>
        <el-table-column
          prop="money"
          label="支付状态"
          width="200"
          align="center"
        ></el-table-column>
       
        <el-table-column
          label="操作"
          align="center"
        >
        <template slot-scope="{ row, index }">
          <el-button
          type="danger"
          icon="el-icon-scissors"
          title="取消报名"
          size="big"
          @click="deleteApps(row)"
          ></el-button>
          <el-button
          type="success"
          icon="el-icon-shopping-cart-full"
          :title="row.money == '已支付' ? '已支付' : '前往支付'"
            :disabled="info.nickname !== row.nickname || row.money == '已支付'"
          size="big"
          @click="toMoney(row)"
          ></el-button>
        </template></el-table-column>
      </el-table>
      
        <el-button type="primary" style="margin-top:30px;margin-left:40%;" @click='back'> <i class="el-icon-back"></i>返回个人信息页 </el-button>
      
      </div>
    </div>
   
  </div>
</template>

<script>
/*eslint-disable*/
import { getInfo, updateInfo, practiceCar, Myexam } from "@/api/user";
 import {app,deleteApplication,pay,} from '@/api/application'
 import {cancelExam} from '@/api/exam'
 import {cancelPractice} from '@/api/practice'
 import { getToken } from "@/utils/auth";

import { mapState } from "vuex";
export default {
  name: "userInfo",
  data() {
    return {
      nickname: "",
      form: {
        date: "",
        photo: "",
        phone: "",
        nickname: "",
        username: "",
        role: "",
        id: "",
      },
      practiceList: [],
      examList: [],
      status:0,
      myApp:[],
      headerObj:{token:getToken()}
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
        console.log(res)
        this.$set(this.form,'photo',res+`?token=${this.headerObj.token}`)
    },
    async getinfo() {
      let res = await getInfo();
      if (res.code == 200) {
        (this.form.date = res.data.date),
          (this.form.username = res.data.username),
          (this.form.nickname = res.data.nickname),
          (this.form.phone = res.data.phone),
          (this.form.photo = res.data.photo + `?token=${this.headerObj.token}`);
          (this.form.role = res.data.role), (this.form.id = res.data.id);
          this.form.age = res.data.age;
          this.form.gender = res.data.gender;
          this.nickname = res.data.nickname;
      }
    },
  
    async submitInfo() {
      let data = this.form;
      data.photo =  this.form.photo.split('?')[0]
     
      let res = await updateInfo(data);
      
      if (res.code == 200) {
        this.form = {};
          (this.form.date = res.data.date),
          (this.form.username = res.data.username),
          (this.form.nickname = res.data.nickname),
          (this.form.phone = res.data.phone),
          (this.form.photo = res.data.photo + `?token=${this.headerObj.token}`);
         (this.form.role = res.data.role), (this.form.id = res.data.id);

        this.$message({
          message: res.message,
          type: "success",
        });
        this.$store.dispatch('user/getInfo')
      }
    },
    async getPractice() {
      let res = await practiceCar(this.nickname);
      if (res.code == 200) {
        this.practiceList = res.data;
        this.practiceList.forEach(item => {
            item.time = this.dayjs(item.time).format("YYYY-MM-DD HH:mm:ss")
            item.img = item.img + `?token=${this.headerObj.token}`
            item.title = '练车预约'
        });
      }
    },
    async getExam() {
      let res = await Myexam(this.nickname);
      if (res.code == 200) {
        this.examList = res.data;
        this.examList.forEach(item => {
            item.time = this.dayjs(item.time).format("YYYY-MM-DD HH:mm:ss")
            item.title = '考试预约'
        });
      }
    },
   async logout(){
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    checkMore(){
      this.status =1
    },
  async  getApp(){
    let nickname = JSON.parse(localStorage.getItem('infomation')).nickname
      let res =await app(nickname)
      this.myApp = res.data
      this.myApp.forEach(element => {
          element.title='报名信息'
          element.photo = element.photo + `?token=${this.headerObj.token}`
      });
      
    },
    async deleteApps(row) {
      let res = await deleteApplication(row.id);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getApp();
      }
    },
    back(){
      this.status = 0
    },
    async toMoney(row) {
      let res = await pay(row.id);
      console.log(res);
      if (res.code == 200) {
        window.open(res.paymentUrl);
        this.getApp();
      }
    },
   async cancelExam(row){
     
      let res =await cancelExam(row.id)
      console.log(res);
      if(res.code==200){
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getExam()
      }
    },
    async cancelPra(row){
     
     let res =await cancelPractice(row.id)
     if(res.code==200){
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getPractice()
      }
      
   }
  },

  beforeMount() {
    this.getinfo();
  },
  
  mounted() {
    this.getApp()
  },
  computed: {
    ...mapState({
      info: (store) => store.user.info,
    }),
  },
  watch: {
    nickname(newValue, oldValue) {
      this.getPractice();
      this.getExam();
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 87%;
  box-shadow: 4px 4px 15px rgb(136, 116, 116);
  margin-left: 40px;
  padding: 20px 0;
  box-sizing: border-box;
 
  .wrapper{
    width: 100%;
    height: 650px;
  }
  img {
    width: 100%;
    height: 100px;
  }
  
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
 
}
</style>